{extend name="login_or_register/common" /}

{block name="body"}
<div class="ui stacked segment blue">
    <form id="form" name="form" method="post" action="{:url('checkRegister')}" autocomplete="off">
        <div class="field">
            <div class="ui icon input">
                <i class="user icon"></i>
                <input id="account" name="account" type="text" placeholder="用户名" autocomplete="off">
            </div>
        </div>
        <div class="field">
            <div class="ui icon input">
                <i class="lock icon"></i>
                <input id="password" name="password" type="password" placeholder="密码" autocomplete="off">
            </div>
        </div>
        <div class="field">
            <div class="ui icon input">
                <i class="lock icon"></i>
                <input id="repwd" name="repwd" type="password" placeholder="确认密码" autocomplete="off">
            </div>
        </div>
        <div class="field">
            <div class="ui icon input">
                <a> <img class="reloadverify" src="{:url('captcha')}" id="imgcode" onClick="this.src=this.src+'?rand='+Math.random()"
                         alt="captcha"></a>
            </div>
        </div>
        <div class="field">
            <div class="ui icon input">
                <input id="code" name="code" type="text" placeholder="验证码" autocomplete="off">
            </div>
        </div>
        <input type="submit" id="register" value="注册" class="ui fluid large teal submit  button" >
    </form>
</div>

<div class="ui message">
    已有账号，直接 <a href="{:url('login')}">登录</a>
</div>

<script>
    //检验账号格式
    function checkname(name) {
        var reg = /^[A-Za-z0-9]+$/;
        if (!reg.test(name)) {
            layer.msg( "用户名应由数字和26个英文字母组成");
            return false;
        }
        if (name.length < 5 || name.length > 14) {
            layer.msg( "用户名长度应为5-14个字符");
            return false;
        }
        return true;
    }

    //检查密码格式
    function checkpassword(password) {
        if (password.length < 6 || password.length > 16) {
            layer.msg( "密码长度应为6-16个字符");
            return false;
        }
        return true;
    }

    //检查密码是否一样
    function checkSame(password,repassword) {
        if(password!==repassword){
            layer.msg("两次密码输入不同");
            return false;
        }
        return true;
    }
</script>

<script>
    //ajax异步提交
    $('form').submit(function () {
        var account = $("#account").val();
        var password = $("#password").val();
        var repassword=$("#repwd").val();
        var code = $("#code").val();

        var data = {};

        if (!checkname(account)) {
            return false;
        }
        if (!checkpassword(password)) {
            return false;
        }
        if (!checkSame(password,repassword)) {
            return false;
        }
        if (!code) {
            layer.msg('验证码不能为空！');
            return false;
        }

        var url = $(this).attr('action');

        data.account = account;
        data.password = password;
        data.code = code;

        $.ajax({
            type: "post",
            url: url,
            dataType: "json",
            data: data,
            success: function (res) {
                if (res.status) {
                    layer.msg(res.message, {time: 1000}, function () {
                        window.location.href = "{:url('index/index')}";
                    });
                } else {
                    //刷新验证码
                    $(".reloadverify").click();
                    layer.msg(res.message);
                }
            }
        });
        return false;
    });
</script>
{/block}

